import Taro, { Component } from '@tarojs/taro'
import classnames from 'classnames'
import PropsType from 'prop-types'
import { View, Picker } from '@tarojs/components'
import { AtIcon } from 'taro-ui'
import { city } from './city'
import '../styles/selectmap.scss'

export default class DSelectMap extends Component {

    constructor(props) {
        super(props)
        this.state = {
            rangedata: [[], []],
            Chinashi: [],
            itemaddre: "",
            cityvalue: [[0], [0]],
            first: '',
            secode: ''
        }
    }

    componentWillMount() {
        this.onChangeCity()
    }

    onChangeCity = () => {
        let { rangedata } = this.state
        let chinadata = Object.values(city)
        let China = [], Chinashi = []
        chinadata.map((item, i) => {
            let itemdata = []
            item.map((_item, j) => {
                China.push(_item.province)
                itemdata.push(_item.name)
            })
            Chinashi[i] = itemdata
        })
        China = [...new Set(China)]
        rangedata[0] = China
        rangedata[1] = Chinashi[0]
        this.setState({
            rangedata,
            Chinashi
        })

    }

    onColumnChange(e) {
        let { detail } = e
        let { rangedata, Chinashi } = this.state
        if (detail.column !== 0) {
            return
        }
        rangedata[1] = Chinashi[detail.value]
        this.setState({
            rangedata
        })
    }

    onCancelHanlde(active) {
        let { rangedata, Chinashi, cityvalue, itemaddre, first, secode } = this.state
        if (typeof active === 'object' && !itemaddre) {
            rangedata[1] = Chinashi[0]
            cityvalue[0][0] = 0
            cityvalue[1][0] = 0

        } else if (typeof active === 'object' && itemaddre) {
            rangedata[1] = Chinashi[first]
            cityvalue[0][0] = first
            cityvalue[1][0] = secode
        } else {
            rangedata[1] = Chinashi[active]
        }
        this.setState({
            rangedata,
            cityvalue
        })
    }

    onChangeHandle = (e) => {
        let { detail } = e
        let { rangedata, itemaddre, cityvalue } = this.state
        let first = detail.value[0], secode = detail.value[1]
        let regionInfo = {
            first: rangedata[0][first],
            secode: rangedata[1][secode]
        }
        itemaddre = rangedata[0][first] + rangedata[1][secode]
        cityvalue[0][0] = first
        cityvalue[1][0] = secode
        this.setState({
            itemaddre,
            cityvalue,
            first,
            secode
        }, () => {
            this.props.onChangeHandle && this.props.onChangeHandle(regionInfo)
            this.onCancelHanlde(first)
        })

    }

    render() {
        const {
            rangedata,
            cityvalue,
            itemaddre
        } = this.state
        const {
            className,
            title,
            placeholder,
            value,
            require,
            disabled
        } = this.props
        return (
            <View className={classnames('b_selectmap', className)}>
                {
                    title && <View className={classnames('b_selectmap__info', require ? 'b_selectmap__require' : '')}>{title}</View>
                }
                <Picker value={cityvalue} disabled={disabled} className='b_selectmap__picker' mode='multiSelector' range={rangedata} onChange={this.onChangeHandle.bind(this)} onCancel={this.onCancelHanlde.bind(this)} onColumnChange={this.onColumnChange.bind(this)}>
                    <View className='b_selectmap__tip'>
                        <View className={classnames('b_selectmap__tip_text', (value || itemaddre) ? 'b_selectmap__region' : '')}>{value || itemaddre || placeholder}</View>
                        <AtIcon value='chevron-right' size='24' color='#ccc'></AtIcon>
                    </View>
                </Picker>
            </View>
        )
    }
}
DSelectMap.defaultProps = {
    className: "",
    title: "示列1",
    value: "",
    placeholder: "请输入示列1",
    require: false,
    disabled: false,
    onChangeHandle: () => { }
}

DSelectMap.PropsType = {
    className: PropsType.oneOfType[PropsType.string, PropsType.object],
    value: PropsType.string,
    title: PropsType.string,
    require: PropsType.bool,
    placeholder: PropsType.string,
    onChangeHandle: PropsType.func
}
